<template>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {

    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const myChart = echarts.init(this.$refs.chart);
            const option = {
                title: {
                    text: '访问人数: 人',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                        fontWeight: 700,
                    },
                    left: "5%",
                    top: "10%"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color: ['#9adeb6', '#6b09e4', '#0f4c86', '#75461d', '#ec0430', "#ba0af8"],
                legend: {
                    data: ['好友分享', '公众号', '小程序使用记录', '换卖', '线下扫码', '其他'],
                    x: 'center',
                    y: 'bottom',
                    padding: [30, 0, 10, 20],
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        fontWeight: 700,
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2024-06-16', '2024-06-24', '2024-07-02', '2024-07-10'],
                    axisLabel: {
                        interval: 0,
                        fontSize: 11,
                        fontWeight: 700,
                        color: '#75a6d5',

                    },
                    axisLine: {
                        lineStyle: {
                            type: "solid",
                            color: "#8f0dcd",
                            width: 3
                        },

                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#75a6d5'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dotted',
                            color: '#75a6d5'
                        }
                    }
                },
                series: [
                    {
                        name: '好友分享',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '公众号',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '小程序使用记录',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '换卖',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '线下扫码',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '其他',
                        type: 'line',
                        symbol: 'circle',
                        stack: '总量',
                        data: [0, 0, 0, 0]
                    }
                ]
            };

            myChart.setOption(option);
        }
    }
}
</script>

<style scoped>

</style>
